<!doctype html>
<html lang="zh" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>开票信息弹框填写示例</title>
  <style>
    .order-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(40, 40, 40, 0.4);
      display: none;
    }

    .order-modal > iframe {
      width: 560px;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<div>
  <button onclick="showModal()">点击开票</button>
</div>
<div class="order-modal" id="fapiao-order-modal">
  <iframe
    src="mobile.html?taxNumber=91320211MA1WML8X6T&accessToken=79f2486841c6f9bc0521e0f162795d44&username=C4CA4238A0B923820DCC509A6F75849B"
    frameborder="0"></iframe>
</div>
</body>
<script>
  window.addEventListener('message', function (event) {
    alert(event.origin);
    if (event.origin !== "https://fapiao-order-modal.easyapi.com")
      return;
    document.getElementById("fapiao-order-modal").style.display = "none";
    //TODO 显示开票名称在当前页面 event.data
    alert(event.data);
  });

  function showModal() {
    document.getElementById("fapiao-order-modal").style.display = "block";
  }
</script>
</html>
